<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--  内部样式表-->
  <style type="text/css">
    body {
      background-color: #b3d4fc
    }

    p {
      margin-left: 20px
    }
  </style>
</head>
<body>
<!--内联样式: 是在相关的标签中使用样式属性,可以包含任何css属性
style 定义样式定义
link 定义资源引用
div 定义文档中的节或区域(块级)
<span> 定义文档中的行内的小块或区域
<font> 定义文本的字体,字体颜色
margin-left 左外边距
超链接
  <a> 标签的方式
  通过 href属性 创建指向另一个文档的链接
  通过 name属性 创建文档内的书签
  "链接文本" 不必一定是文本,图片或其他html元素都可以成为链接
  target 定义在什么位置打开文档
    _self:当前浏览上下文。(默认)
    _blank:通常是一个新选项卡，但用户可以配置浏览器打开一个新窗口。
    _parent:当前浏览上下文的父浏览上下文。如果没有父级，则表现为_self。
    _top:最顶层的浏览上下文(是当前上下文的祖先的“最高”上下文)。如果没有祖先，则表现为_self。
  name 属性规定锚的名称 可以使用name属性 创建html页面中的书签
  当使用命名锚时 我们可以创建直接跳至该命名锚 (比如页面中某个小节)的链接 这样使用者就无需不停地滚动页面来寻找他们需要的信息
  锚的名称可以是任何你喜欢的名字.
  您可以使用id属性来替代name属性,命名锚同样有效
  首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

  <a name="tips">基本的注意事项 - 有用的提示</a>
  然后，我们在同一个文档中创建指向该锚的链接：

  <a href="#tips">有用的提示</a>
  您也可以在其他页面中创建指向该锚的链接：

  <a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
  在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

  锚点
    首先对要跳转的位置进行锚点创建,创建一个书签
      <a name="tips">
    页面内跳转: <a href="#tips">
    页面外跳转:
     本地模块跳转: <a href="/src/demo2.html#tips">
     网页跳转: <a href="https://www.w3school.com.cn/html/html_links.asp#tips">

插入图片
  图片 由 <img> 标签定义 ,是空标签,只包含属性,没有闭合标签
  src 源属性 值是图像的url地址
  url 指存储图像的位置
  alt 替换文本属性 , alt属性用来为图像定义一串预备的可替换的文本,替换文本属性的值是用户定义的
    当浏览器无法载入图像时,替换文本属性可以告诉读者他们失去的信息,此时浏览器将显示这个替代性的文本而不是图像.


表格
  表格由 <table>标签来定义 每个表格均有若干行(由<tr>标签定义),每行被分割为若干单元格 (由td标签定义)
  表格边框 如果不定义将不显示边框 使用 border="1'
  表格 表头使用th标签进行定义
  表格中的空单元格 如果单元格中没有内容显示,浏览器可能无法显示出单元格的边框


大多数html 元素被定义为块级元素或内联元素
  <h1>,<p>,<ul>,<table>

内联元素 内联元素在显示时通常不会以新行开始
<b>,<td>,<a>,<img>

<div> 块级元素 div 元素可用于组合其他HTML元素的容器
div 元素的另一个常见的用途是文档布局
span 用作文本容器



-->
<p style="color: red; margin-left: 20px">这个是验证文本!</p>
<a href="https://www.baidu.com" target="_blank">访问百度!</a><br>
<a href="https://www.baidu.com" target="_parent">访问百度!</a> <br>
<a href="https://www.baidu.com" target="_self">访问百度!</a><br>
<a href="https://www.baidu.com" target="_top">访问百度!</a><br>
<a name="label">锚(显示在页面上的文本)</a><br>
<p>提示信息1:哒哒哒多</p>
<a href="#tips">有用的提示</a><br>
<p>提示信息1:哒哒哒多</p>
<a name="tips">基本的注意事项 - 有用的提示</a><br>
<a href="https://www.w3school.com.cn/html/html_links.asp#tips">其他页面跳转锚点信息</a><br>
<p>提示信息1:哒哒哒多</p>


<!--在新窗口打开一个页面,这样的话访问者就无需离开你的站点-->
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>

<!--使用链接跳转至文档的另外一个部分-->
<p>
  <a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<!--跳出框架,如果你的页面被固定在框架之内-->
<p>被锁在框架中了吗？</p>

<a href="/index.html"
   target="_top">请点击这里！</a>


<!--创建电子邮件链接 链接到一个邮件-->
<p>
  这是邮件链接：
  <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<!--复杂的邮件链接-->
<p>
  这是另一个 mailto 链接：
  <a
    href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件！</a>
</p>

<p>
  <b>注意：</b>应该使用 %20 来替换单词之间的空格，这样浏览器就可以正确地显示文本了。
</p>

<img src="/img/girl_gesture_shorts_1066017_300x168.jpg" width="300" height="168" alt="picture">
<!--border=1 边框为1 border=0 不显示边框-->
<table border="1">
  <caption>表格标题</caption>
  <tr>
    <!--    表头-->
    <th>Heading</th>
    <th>Another Heading</th>
  </tr>
  <tr>
    <td>
      row 1,cell 1
    </td>
    <td>
      row 1, cell 2
    </td>
  </tr>
  <tr>
    <!--    空内容: 在空单元格中添加一个空格占位符,就可以将边框显示出来-->
    <td>
      <!--      添加一个空格进行占位-->
      &nbsp;
    </td>
    <td>
      row 2, cell 2
    </td>
  </tr>

</table>

<!--横跨两列的单元格-->
<h4>横跨两列的单元格</h4>
<table border="1">
  <tr>
    <th>姓名</th>
    <!--    横跨 colspan-->
    <th colspan="2">电话</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577865</td>
    <td>55577863</td>
  </tr>
</table>

<h4>横跨两行的单元格</h4>
<table border="1">
  <tr>
    <th>姓名</th>
    <th>Bill Gates</th>
  </tr>
  <tr>
    <!--    横跨 rowspan-->
    <th rowspan="2">电话</th>
    <td>55577997</td>
  </tr>
  <tr>
    <td>55587799</td>
  </tr>
</table>

<!--无序列表 无序列表是一个项目的列表,此项目使用粗体圆点进行标记 无序列表始于ul标签 列表始于li-->
<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

<!--有序列表 有序也是一列项目 列表项目使用数字进行标记 有序列表始于ol标签 列表始于li标签-->
<ol>
  <li>Coffer</li>
  <li>Milk</li>
</ol>

<!--自定义列表 自定义列表以dl标签开始 每个自定义列表项以dt开始 每个自定义列表项的定义以dd开始-->
<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>While cold drink</dd>
</dl>


</body>
</html>
